import { NavBar, Button, DatePicker, Input } from "antd-mobile"
import classNames from "classnames"
import Icon from '@/components/Icon'
import dayjs from 'dayjs'
import { useState, useMemo } from "react"
import { billListData } from '@/contants'
import './index.scss'
import { asyncInsert } from "@/store/modules/billStore"
import { useDispatch } from "react-redux"

const New = () => {
    const dispatch = useDispatch()

    const [billType, setBillType] = useState('pay')
    const [dateVisible, setDateVisible] = useState(false)
    const [useFor, setUseFor] = useState('foods')
    const [money, setMoney] = useState(0)
    const [date, setDate] = useState(new Date())

    const displayDate = useMemo(() => {
        const today = dayjs(new Date()).format('YYYY-MM-DD')
        if(dayjs(date).format('YYYY-MM-DD') === today) return dayjs().format('MM-DD') + ' 今天'
        return dayjs(date).format('YYYY-MM-DD')
    },[date])
    
    // 日期选择器选择一个日期
    const onConfirmDatePicker = selectedDate => {
        setDate(selectedDate)
        setDateVisible(false)
    }

    // input变动修改状态
    const onChangeMoney = moneyNum => {
        setMoney(moneyNum)
    }

    // 新增一笔数据
    const saveBill = () => {
        const bill = { 
            type: billType,
            money: billType === 'income' ? money : money * -1,
            date: date,
            useFor: useFor
        }
        dispatch(asyncInsert(bill))
    }

    return (
        <div className="keepAccounts">
            {/* onBack={() => navigate(-1)} */}
          <NavBar className="nav">
            记一笔
          </NavBar>
    
          <div className="header">
            {/* 支出、收入，两个按钮 */}
            <div className="kaType">
              <Button
                shape="rounded"
                className={classNames(billType === 'pay' ? 'selected' : '')}
                onClick={() => setBillType('pay')}
              >
                支出
              </Button>
              <Button
                className={classNames(billType === 'income' ? 'selected' : '')}
                shape="rounded"
                onClick={() => setBillType('income')}
              >
                收入
              </Button>
            </div>
    
            <div className="kaFormWrapper">
              <div className="kaForm">
                <div className="date">
                  <Icon type="calendar" className="icon" />
                  <span className="text" onClick={() => setDateVisible(true)}>{displayDate}</span>
                  {/* 时间选择器 */}
                  <DatePicker
                    className="kaDate"
                    title="记账日期"
                    max={new Date()}
                    visible={dateVisible}
                    onConfirm={onConfirmDatePicker}
                    onCancel={() => setDateVisible(false)}
                    onClose={() => setDateVisible(false)}// 点击蒙层关闭
                  />
                </div>
                <div className="kaInput">
                  <Input
                    className="input"
                    placeholder="0.00"
                    type="number"
                    value={money}
                    onChange={onChangeMoney}
                  />
                  <span className="iconYuan">¥</span>
                </div>
              </div>
            </div>
          </div>
    
          <div className="kaTypeList">
            {/* 数据区域 */}
            {billListData[billType].map(item => {
              return (
                <div className="kaType" key={item.type}>
                  <div className="title">{item.name}</div>
                  <div className="list">
                    {item.list.map(item => {
                      return (
                        <div
                          className={classNames('item', useFor === item.type ? 'selected' : '')}
                          key={item.type}
                          onClick={() => setUseFor(item.type)}
                        >
                          <div className="icon">
                            <Icon type={item.type} />
                          </div>
                          <div className="text">{item.name}</div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </div>
    
          <div className="btns">
            <Button className="btn save" onClick={saveBill}>
              保 存
            </Button>
          </div>
        </div>
      )
    }
    
    export default New